﻿<div class="page-container" id="admui-pageContent">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/1.1.0/vendor/layout-grid/layout-grid.css">
    <div class="page animation-fade">
        <div class="page-header">
            <h1 class="page-title">布局栅格</h1>
            <p class="page-description">
            </p>
            <div class="page-header-actions">
                <a class="btn btn-inverse btn-round" href="http://clippings.github.io/layout-grid/" target="_blank"><i class="icon wb-link" aria-hidden="true"></i><span class="hidden-xs">官网</span></a>
            </div>
        </div>
        <div class="page-content">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">快速开始 <span class="panel-desc">使用 CSS 基础布局，Javascript 在不同桌面和移动设备上实现拖动和排序</span></h3>
                </div>
                <div class="panel-body">
                    <div data-arrange="lt-grid" class="lt-container lt-xs-h-9 lt-sm-h-6 lt-md-h-4 lt-lg-h-3">
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-0 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-0 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-0 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>1</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-1 lt-xs-w-1 lt-xs-h-2 lt-sm-x-1 lt-sm-y-0 lt-sm-w-1 lt-sm-h-2 lt-md-x-2 lt-md-y-0 lt-md-w-1 lt-md-h-2 lt-lg-x-1 lt-lg-y-0 lt-lg-w-1 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>2</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-3 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-1 lt-sm-w-1 lt-sm-h-1 lt-md-x-1 lt-md-y-0 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-1 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>3</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-4 lt-xs-w-1 lt-xs-h-2 lt-sm-x-0 lt-sm-y-2 lt-sm-w-2 lt-sm-h-2 lt-md-x-0 lt-md-y-1 lt-md-w-2 lt-md-h-2 lt-lg-x-2 lt-lg-y-0 lt-lg-w-2 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>4</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-6 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-4 lt-sm-w-1 lt-sm-h-1 lt-md-x-2 lt-md-y-2 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-2 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>5</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-7 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-5 lt-sm-w-2 lt-sm-h-1 lt-md-x-1 lt-md-y-3 lt-md-w-2 lt-md-h-1 lt-lg-x-1 lt-lg-y-2 lt-lg-w-2 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>6</h3>
                            </div>
                        </div>
                        <div draggable="true" class="lt lt-xs-x-0 lt-xs-y-8 lt-xs-w-1 lt-xs-h-1 lt-sm-x-1 lt-sm-y-4 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-3 lt-md-w-1 lt-md-h-1 lt-lg-x-3 lt-lg-y-2 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>7</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">静态示例 <span class="panel-desc">这是一个响应式表格的静态的示例，没有使用任何 JavaScript。</span></h3>
                </div>
                <div class="panel-body">
                    <div class="lt-container lt-xs-h-18 lt-sm-h-12 lt-md-h-8 lt-lg-h-6">
                        <div class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-0 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-0 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-0 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>1</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-1 lt-xs-w-1 lt-xs-h-2 lt-sm-x-1 lt-sm-y-0 lt-sm-w-1 lt-sm-h-2 lt-md-x-2 lt-md-y-0 lt-md-w-1 lt-md-h-2 lt-lg-x-1 lt-lg-y-0 lt-lg-w-1 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>2</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-3 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-1 lt-sm-w-1 lt-sm-h-1 lt-md-x-1 lt-md-y-0 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-1 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>3</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-4 lt-xs-w-1 lt-xs-h-2 lt-sm-x-0 lt-sm-y-2 lt-sm-w-2 lt-sm-h-2 lt-md-x-0 lt-md-y-1 lt-md-w-2 lt-md-h-2 lt-lg-x-2 lt-lg-y-0 lt-lg-w-2 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>4</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-6 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-4 lt-sm-w-1 lt-sm-h-1 lt-md-x-2 lt-md-y-2 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-2 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>5</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-7 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-5 lt-sm-w-2 lt-sm-h-1 lt-md-x-1 lt-md-y-3 lt-md-w-2 lt-md-h-1 lt-lg-x-1 lt-lg-y-2 lt-lg-w-2 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>6</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-8 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-6 lt-sm-w-2 lt-sm-h-1 lt-md-x-0 lt-md-y-4 lt-md-w-2 lt-md-h-1 lt-lg-x-0 lt-lg-y-3 lt-lg-w-2 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>7</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-9 lt-xs-w-1 lt-xs-h-2 lt-sm-x-0 lt-sm-y-7 lt-sm-w-1 lt-sm-h-2 lt-md-x-2 lt-md-y-4 lt-md-w-1 lt-md-h-2 lt-lg-x-3 lt-lg-y-3 lt-lg-w-1 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>8</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-11 lt-xs-w-1 lt-xs-h-1 lt-sm-x-1 lt-sm-y-7 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-5 lt-md-w-1 lt-md-h-1 lt-lg-x-2 lt-lg-y-3 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>9</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-12 lt-xs-w-1 lt-xs-h-1 lt-sm-x-1 lt-sm-y-8 lt-sm-w-1 lt-sm-h-1 lt-md-x-1 lt-md-y-5 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-4 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>10</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-13 lt-xs-w-1 lt-xs-h-2 lt-sm-x-0 lt-sm-y-9 lt-sm-w-2 lt-sm-h-2 lt-md-x-1 lt-md-y-6 lt-md-w-2 lt-md-h-2 lt-lg-x-1 lt-lg-y-4 lt-lg-w-2 lt-lg-h-2">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>11</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-15 lt-xs-w-1 lt-xs-h-1 lt-sm-x-0 lt-sm-y-11 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-6 lt-md-w-1 lt-md-h-1 lt-lg-x-0 lt-lg-y-5 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>12</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-16 lt-xs-w-1 lt-xs-h-1 lt-sm-x-1 lt-sm-y-4 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-3 lt-md-w-1 lt-md-h-1 lt-lg-x-3 lt-lg-y-2 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>13</h3>
                            </div>
                        </div>
                        <div class="lt lt-xs-x-0 lt-xs-y-17 lt-xs-w-1 lt-xs-h-1 lt-sm-x-1 lt-sm-y-11 lt-sm-w-1 lt-sm-h-1 lt-md-x-0 lt-md-y-7 lt-md-w-1 lt-md-h-1 lt-lg-x-3 lt-lg-y-5 lt-lg-w-1 lt-lg-h-1">
                            <div class="lt-body bg-primary-100 text-center padding-20">
                                <h3>14</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var $li = ' <li class="active Nb-con-tabs"><a href=""> 布局栅格</a></li>';
    $(".Nb-con-tabs:last").after($li)
</script>